import React, { Component } from 'react'
import { createRoot } from 'react-dom/client'

// class Hello extends React.Component {
class Hello extends Component {
  // 必须提供 render 方法
  render() {
    console.log(this) // 为啥 this 是实例？
    // 返回值表示需要渲染的结构
    return <h1>Hello World</h1>
  }
}

// render 渲染类组件的过程？
// render 函数解析标签 <Hello/>，发现是以大写字母开头的，所以会当作【组件】进行解析
// 又发现是一天类组件，内部会直接 new Hello() 得到一个 Hello 组件实例，然后会通过【实例.render()】进行调用，得到 JSX，转成 React.createElement
// React.ceateElement 的返回值是虚拟 DOM
// render 负责把虚拟 DOM 转成真实 DOM 渲染到页面上
createRoot(document.querySelector('#root')).render(<Hello />)
